<template>
  <page-header-wrapper :title="false">
    <a-card :loading="loading">
      <div slot="title"><a-icon type="user" /> 客户详情</div>
      <div slot="extra">
        <a-button size="small" @click="$router.go(-1)">
          <a-icon type="arrow-left" />
          返回
        </a-button>
        <a-button size="small" type="primary" :style="{ marginLeft: '5px' }" @click="$router.push({ name: 'AddContract', query: {customer_id: customerId} })">做合同</a-button>
        <a-button size="small" type="danger" :style="{ marginLeft: '5px' }" @click="abandon(customerId)">放弃客户</a-button>
        <a-button size="small" type="danger" :style="{ marginLeft: '5px' }" @click="transfer">查看转移记录</a-button>
      </div>
      <a-row :gutter="[20, 20]">
        <a-col :span="10">
          <base-info></base-info>
        </a-col>
        <a-col :span="14">
          <detail-right></detail-right>
        </a-col>
        <a-col :span="24">
          <new-business></new-business>
        </a-col>
      </a-row>
    </a-card>
    <a-modal
      title="转移记录"
      v-model="visible"
    >
      <s-table
        ref="table"
        size="small"
        :row-key="(record) => record.id"
        :columns="transferColumns"
        :data="transferData"
      >
      </s-table>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { BaseInfo } from './components'
import { takeAbandon, getCustomerTransfer } from '@/api/customer'
import col from '@/columns/customer'
import DetailRight from '@/views/customer/components/DetailRight'
import NewBusiness from '@/views/customer/components/NewBusiness'
const transferColumns = col.transfer
export default {
  components: {
    NewBusiness,
    DetailRight,
    STable,
    BaseInfo
  },
  name: 'CustomerDetail',
  data () {
    return {
      transferColumns,
      transferData: parameters => {
        return getCustomerTransfer(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      queryParam: {},
      visible: false,
      loading: true,
      rightLoading: true,
      customerId: ''
    }
  },
  activated () {
    this.loading = true
    this.$nextTick(function () {
      this.customerId = this.$route.params.id
      this.queryParam['filter[customer_id]'] = this.customerId
      this.loading = false
    })
  },
  methods: {
    transfer () {
      this.visible = true
    },
    abandon (id) {
      const app = this
      app.$confirm({
        title: '警告',
        content: '是否确定休了客户',
        onOk () {
          takeAbandon(id).then(res => {
            if (res.status === 0) {
              app.$router.go(-1)
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        }
      })
    }
  }
  // watch: {
  //   '$route' (to, from) {
  //     this.$router.go(0)
  //   }
  // }
}
</script>

<style scoped>

</style>
